<template>
  <Row>
        <Col span="12">
            <DatePicker type="date" placeholder="开始时间" 
            :start-date="new Date(2015,2,2)"  
            :options="options1" 
            :value='$store.state.start_date'
            @on-change="handleChange"
            style="width: 200px"></DatePicker>
        </Col>
        <Col span="12">
            <DatePicker type="date" placement="bottom-end" 
            :start-date="new Date(2020, 7, 27)" 
            @on-change="handleChange2"
            :value='$store.state.end_date' 
            :options="options2" placeholder="结束时间" 
            style="width: 200px"></DatePicker>
        </Col>
    </Row>
</template>

<script>
export default {
    data() {
        return {
            options1: {
                disabledDate (date) {
                    if (date < new Date(2015, 2, 1) || date > new Date(2020, 7, 27)) {
                    return true
                    } else {
                    return false
                    }
                }
            },
            options2: {
                disabledDate (date) {
                    if (date < new Date(2015, 2, 1) || date > new Date(2020, 7, 27)) {
                    return true
                    } else {
                    return false
                    }
                }
            }
        }
    },
    methods:{
        handleChange (date) {
            this.$store.commit('setDate', {type:'start', date});
        },
        handleChange2 (date) {
            this.$store.commit('setDate', {type:'end', date});
        },
       
    }
}
</script>

<style>

</style>